window.addEventListener('load',function () {
    /*轮播图
    * 1. 鼠标经过时左右按钮显示，离开时隐藏；
    * 2. 动态生成小圆点；
    * 3. 小圆点排他思想（干掉所有人，留下我自己）；
    * animate函数，此元素一定要加定位；
    * 4. 点击小圆点滚动图片，ul移动，而不是li移动
    * 核心算法：小圆点的序号乘以图片的宽度作为移动的距离
    * ；
    * 5. 点击右侧按钮，图片滚动一张
    * 无缝滚动：把ul的第一个li复制一份，放到最后面
    * 当图片滚动到最后一张时，快速跳到第一张left:0
    * 6. 克隆第一张图片
    * 7. 小圆圈跟随右侧按钮一起变化
    *
    * 0. bug
    * 01. 自动播放，类似右侧按钮；鼠标经过停止自动播放，离开开启自动播放
    * */



    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var focus  = document.querySelector('.focus');



    /*1. 鼠标经过时左右按钮显示，离开时隐藏*/
    focus.addEventListener('mouseenter',function () {
        left.style.display = "block";
        right.style.display = "block";
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener('mouseleave',function () {
        left.style.display = "none";
        right.style.display = "none";
        timer = setInterval(function () {
            right.click();
        },1000);
    });



    /*2. 动态生成小圆点*/
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    var focusWidth = focus.offsetWidth;
    for(var i=0; i<ul.children.length; i++){
        var li = document.createElement('li');

        /*4.1 记录当前小圆点的索引号，设置自定义属性*/
        li.setAttribute('index',i);

        ol.appendChild(li);
        /*3. 小圆点排他思想（干掉所有人，留下我自己）*/
        li.addEventListener('click',function () {
            for(var i=0; i<ol.children.length; i++){
                ol.children[i].className = '';
            };
            this.className = 'current';
            /*4. 点击小圆点滚动图片，ul移动，而不是li移动*/
            //var focusWidth = focus.offsetWidth;
            var index = this.getAttribute('index');

            /*0. bug*/
            num = index;
            circle = index;

            animate(ul,-index*focusWidth);
        });
    };
    ol.children[0].className= 'current';


    /*6. 克隆第一张图片*/
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);



    /*5. 点击右侧按钮，图片滚动一张
    * 无缝滚动：把ul的ul.第一个li复制一份，放到最后面
    * 当图片滚动到最后一张时，快速跳到第一张left:0
    * */
    var num = 0;
    var circle = 0;
    right.addEventListener('click',function () {

        if(num === ul.children.length-1){
            ul.style.left = 0;
            num = 0;
        }

        num++;
        animate(ul,-num*focusWidth);

        /*7. 小圆圈跟随右侧按钮一起变化*/
        circle++;
        if(circle === ol.children.length){
            circle = 0;
        }
        /*排他思想*/
        for(var i=0;i<ol.children.length; i++){
            ol.children[i].className = '';
        };
        ol.children[circle].className = 'current';
    });



    left.addEventListener('click',function () {

        if(num === 0){
            num = ul.children.length-1;
            ul.style.left = -num * focusWidth + 'px';
        }

        num--;
        animate(ul,-num*focusWidth);

        /*7. 小圆圈跟随右侧按钮一起变化*/
        circle--;
        if(circle < 0){
            circle = ol.children.length -1;
        }
        /*排他思想*/
        for(var i=0;i<ol.children.length; i++){
            ol.children[i].className = '';
        };
        ol.children[circle].className = 'current';
    });



    /*01. 自动播放，类似右侧按钮*/
    var timer = setInterval(function () {
        right.click();
    },2500);




});